<template>
  <div class="p20 overflow-auto">
    <el-space direction="vertical" fill>
      <el-card style="width: calc(100vw - 240px)">
        <template #header>
          <div class="card-header">
            <span>easy wasm player</span>
          </div>
        </template>
        <div class="flex">
          <div id="livePlay" class="live-player"></div>
          <div>
            <el-button
              type="primary"
              @click="playLiveVideo('http://pull-demo.volcfcdnrd.com/live/st-4536523_yzmhde.flv')"
            >
              播放h264
            </el-button>
            <el-button type="primary" @click="playLiveVideo('https://live.nodemedia.cn:8443/live/sony_4k_264.flv')">
              播放h264 4K
            </el-button>
            <el-button type="primary" @click="playLiveVideo('https://2dland.cn/test/test_video_h265.mp4')">
              播放h265
            </el-button>
            <el-button
              type="primary"
              @click="playLiveVideo('http://pull-demo.volcfcdnrd.com/live/st-4536521_yzmuhevcd.flv')"
            >
              播放h265 视频（1920 * 1080）
            </el-button>
            <el-button
              type="primary"
              @click="
                playLiveVideo(
                  'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
                )
              "
            >
              hls播放h264
            </el-button>
            <el-button
              type="primary"
              @click="
                playLiveVideo(
                  'https://voddemo-play.volcvod.com/8d1417d814b24fee8b8b0c2747f303e5/main.m3u8?a=0&auth_key=1765632280-d3569ddc77d445ab8647746220f67766-0-0222f8289976f07f8c91c230753ce911&br=384&bt=384&cd=0|0|0&ch=0&cr=1&cs=&cv=1&dr=0&ds=2&er=0&l=202212142122085BF19BF20712C413A9A2&lr=&mime_type=video_mp4&net=0&pl=0&qs=0&rc=amg6c2o0aTg6ZTQzNGRnM0ApZzlnZzNlPGRlNzZmZTg5NWdfZy9gMHFrYTBgLS1kYy9zczQxNi4wYmItLTVgYTFjXjU6Yw%3D%3D&vl=&vr=',
                )
              "
            >
              hls播放h265
            </el-button>

            <el-button
              type="primary"
              @click="
                playLiveVideo(
                  'https://spnl.gxxcnet.cn/21cn/vcp/3KSCP27475SUKPC_1.flv?key=5457b72bc193e526d89609da54129430&appId=1671094590&t=1742264166',
                )
              "
            >
              video
            </el-button>
          </div>
        </div>
      </el-card>
    </el-space>
  </div>
</template>
<script setup lang="ts">
declare global {
  interface Window {
    EasyPlayerPro: any
  }
}
let easyPlayerPro: any
function loadScript(url: string, callback: Function) {
  var script = document.createElement('script')
  script.type = 'text/javascript'
  // 异步加载脚本
  script.async = true
  // 设置脚本的来源
  script.src = url
  // 监听脚本加载完成的事件
  script.onload = function () {
    console.log('Script loaded and ready to use')
    if (callback) callback()
  }
  // 错误处理
  script.onerror = function () {
    console.error('Error loading script:', url)
  }
  // 将脚本添加到文档中
  document.head.appendChild(script)
}
onMounted(() => {
  loadScript(`${import.meta.env.BASE_URL}easyplayer/easyplayer-pro.js`, function () {
    initVideo()
  })
})
// onUnmounted(() => {
//   easyPlayerPro.destroy()
// })
const initVideo = () => {
  easyPlayerPro = new window.EasyPlayerPro({
    container: document.getElementById('livePlay'), // 视频播放容器的 DOM 元素
    decoder: './easyplayer/decoder-pro.js', // 视频解码器文件路径
    // controlHtml: 'test controlHtml',
    videoBuffer: 0.2, // 视频缓存时长（单位：秒）
    isResize: true, // 是否支持播放器大小调整
    // text: 'test text', // 初始显示的文本（为空字符串表示不显示）
    // loadingText: 'tesst努力加载中', // 加载视频时显示的文本
    useMSE: true, // 是否使用 MSE 支持flv（Media Source Extensions）*必开不然有报错,hls格式不支持*
    // useSIMD: true, // 是否使用 SIMD（Single Instruction Multiple Data）
    // useWCS: true, // 是否使用 WCS（WebRTC通讯服务）
    // isMulti: true, // 是否支持多路视频播放
    hasAudio: true, // 是否有音频
    // reconnection: true, // 是否支持自动重连
    showBandwidth: true, // 是否显示网速（注释掉，未启用）*必开不然有报错*
    // showPerformance: true, // 是否显示性能信息
    // poster: this.poster, // 视频封面
    // debug: true,
    // debugLevel: 'debug',
    operateBtns: {
      // 播放器操作按钮配置
      fullscreen: true, // 是否显示全屏按钮
      screenshot: true, // 是否显示截图按钮
      // play: true, // 是否显示播放按钮
      audio: true, // 是否显示音频控制按钮
      record: true, // 是否显示录制按钮
      quality: true, // 是否显示画质选择按钮
      performance: true, // 是否显示性能按钮
    },
    // playbackForwardMaxRateDecodeIFrame: 1, // 快进最大解码速率（单位：倍速）
    isWebrtcForOthers: false, // 是否对其他流使用 WebRTC
    demuxUseWorker: true, // 是否使用 Web Worker 进行解复用 *** 为false时h264无法播放
    supportHls265: true, // 是否支持 HLS 265 格式的视频流
  })
}
const playLiveVideo = (url: string) => {
  easyPlayerPro.play(url)
}
</script>
<style scoped lang="scss">
.live-player {
  width: 100%;
  aspect-ratio: 16/9;
  max-width: 600px;
  background-color: #000;
}
</style>
